---
id: footer
title: Footer
hide_table_of_contents: true
---

import Playground from '@theme/Playground';

## Simple

<Playground>
  <footer class="footer">
    <div class="container container--fluid">
      <div class="footer__links">
        <a class="footer__link-item" href="#url">
          Documentation
        </a>
        <span class="footer__link-separator">&middot;</span>
        <a class="footer__link-item" href="#url">
          GitHub
        </a>
        <span class="footer__link-separator">&middot;</span>
        <a class="footer__link-item" href="#url">
          Blog
        </a>
        <span class="footer__link-separator">&middot;</span>
        <a class="footer__link-item" href="#url">
          Contribute
        </a>
      </div>
      <div>Copyright © 2019 Facebook, Inc.</div>
    </div>
  </footer>
</Playground>

## Multi-Column

<Playground>
  <footer class="footer">
    <div class="container container--fluid">
      <div class="row footer__links">
        <div class="col footer__col">
          <h4 class="footer__title">Docs</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Getting Started
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                API
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                FAQ
              </a>
            </li>
          </ul>
        </div>
        <div class="col footer__col">
          <h4 class="footer__title">Community</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Users
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Contribute
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Stack Overflow
              </a>
            </li>
          </ul>
        </div>
        <div class="col footer__col">
          <h4 class="footer__title">Social</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                GitHub
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Facebook
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Twitter
              </a>
            </li>
          </ul>
        </div>
        <div class="col footer__col">
          <h4 class="footer__title">More</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Tutorial
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Blog
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="text--center">
        <div class="margin-bottom--sm">
          <img
            class="footer__logo"
            alt="Facebook Open Source Logo"
            src="img/fb-oss-dark.png"
          />
        </div>
        Copyright © 2019 Facebook, Inc.
      </div>
    </div>
  </footer>
</Playground>

## Dark

<Playground>
  <footer class="footer footer--dark">
    <div class="container container--fluid">
      <div class="footer__links">
        <a class="footer__link-item" href="#url">
          Documentation
        </a>
        <span class="footer__link-separator">&middot;</span>
        <a class="footer__link-item" href="#url">
          GitHub
        </a>
        <span class="footer__link-separator">&middot;</span>
        <a class="footer__link-item" href="#url">
          Blog
        </a>
        <span class="footer__link-separator">&middot;</span>
        <a class="footer__link-item" href="#url">
          Contribute
        </a>
      </div>
      <div>Copyright © 2019 Facebook, Inc.</div>
    </div>
  </footer>
</Playground>

<Playground>
  <footer class="footer footer--dark">
    <div class="container container--fluid">
      <div class="row footer__links">
        <div class="col footer__col">
          <h4 class="footer__title">Docs</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Getting Started
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                API
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                FAQ
              </a>
            </li>
          </ul>
        </div>
        <div class="col footer__col">
          <h4 class="footer__title">Community</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Users
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Contribute
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Stack Overflow
              </a>
            </li>
          </ul>
        </div>
        <div class="col footer__col">
          <h4 class="footer__title">Social</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                GitHub
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Facebook
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Twitter
              </a>
            </li>
          </ul>
        </div>
        <div class="col footer__col">
          <h4 class="footer__title">More</h4>
          <ul class="footer__items">
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Tutorial
              </a>
            </li>
            <li class="footer__item">
              <a class="footer__link-item" href="#url">
                Blog
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="text--center">
        <div class="margin-bottom--sm">
          <img
            class="footer__logo"
            alt="Facebook Open Source Logo"
            src="img/fb-oss-dark.png"
          />
        </div>
        Copyright © 2019 Facebook, Inc.
      </div>
    </div>
  </footer>
</Playground>
